﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>第一个月度报表</title>
    <link href="swiper-bundle.min.css" rel="stylesheet" />
    <link href="js/animate.min.css" rel="stylesheet" />

    <link href="YearData.css" rel="stylesheet" />
</head>

<body>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="YearDataLeft ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s">
                    <p>
                        亲爱的<strong class="ani">迎儿宝贝</strong>:
                    </p>
                    <p>
                        您好！这是我们相互陪伴的第 <strong>1</strong> 个月！
                    </p>
                    <p>请查阅我们的一月回忆</p>
                </div>
                <div class="YearDataRight ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s">
                    <img src="img/1.png" alt="Alternate Text" />
                </div>
            </div>
            <div class="swiper-slide">
                <div class="YearDataRight ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s">
                    <img src="img/2.png" alt="Alternate Text" />
                </div>
                <div class="YearDataLeft ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s">
                    <p>2021年1月3日</p>
                    <p>臧邦玉成为了迎儿的男朋友</p>
                    <p>显然那天的梦都是甜的</p>
                    <p>迎儿宝贝</p>
                    <p>从那天开始</p>
                    <p>你就是我的朝朝暮暮</p>
                </div>

            </div>
            <div class="swiper-slide">
                <div class="YearDataLeft ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s">
                    <p>
                        <strong>在这一个月里</strong>，
                    </p>
                    <p>我们经历了</p>

                </div>
                <div class="YearDataRight ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s">
                    <img src="img/3.png" alt="Alternate Text" />
                </div>
            </div>
            <div class="swiper-slide">

                <div class="YearDataRight ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s">
                    <img src="img/4.png" alt="Alternate Text" />
                </div>
                <div class="YearDataLeft ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s">
                    <p>Emmmm<strong>我多想粘着你呀</strong>，</p>
                    <p>我们打了多少个电话呢？</p>
                    <p>有这么多，不下2000分钟吧！</p>

                </div>
            </div>
            <div class="swiper-slide">
                <div class="YearDataLeft ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s">
                    <p>文字记录我叫了你 <strong>612</strong> 个宝！</p>
                    <p>感谢你耳朵磨成茧子都在理我！</p>
                </div>
                <div class="YearDataRight ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s">
                    <img src="img/5.png" alt="Alternate Text" />
                </div>
            </div>
            <div class="swiper-slide">

                <div class="YearDataRight ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s">
                    <img src="img/6.png" alt="Alternate Text" />
                </div>
                <div class="YearDataLeft ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s">
                    <p>这个月我们一共有<strong>4592</strong> 条消息记录</p>
                    <p>这些还 <strong>不包括</strong> 打电话哟！</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="YearDataLeft ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s">
                    <p>在这一个月里，我想了你<strong>5146</strong>次</p>
                    <p>当然是我保守估计的呢！</p>
                    <p>每天都在想你</p>
                </div>
                <div class="YearDataRight ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s">
                    <img src="img/7.png" alt="Alternate Text" />
                </div>
            </div>
            <div class="swiper-slide">
                <div class="YearDataRight ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s">
                    <img src="img/8.png" alt="Alternate Text" />
                </div>
                <div class="YearDataLeft ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s">
                    <p>在这一个月我总共和你玩了 <strong>232</strong> 场游戏！</p>
                    <p>”不准骂骂咧咧“</p>
                    <p>是我听到最暖心的话！</p>
                </div>

            </div>
            <div class="swiper-slide">

                <div class="YearDataLeft ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s">
                    <p>对了，这个月，我一共气了你 <strong>32</strong> 天</p>
                    <p>一个大大的<strong>我很喜欢你</strong>希望你能看到</p>
                    <p>今天你的大猪蹄子又惹你了吗？</p>
                </div>
                <div class="YearDataRight ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s">
                    <img src="img/9.png" alt="Alternate Text" />
                </div>
            </div>
            <div class="swiper-slide">
                <div class="YearDataRight ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s">
                    <img src="img/10.png" alt="Alternate Text" />
                </div>
                <div class="YearDataLeft ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s">
                    <p>这一个月里，有<strong>2626560</strong>秒我都在哄你</p>
                    <p>不想让你生气的我哄了你整整一个月</p>
                    <p>希望你一直不生气才好！</p>
                </div>

            </div>
            <div class="swiper-slide">

                <div class="YearDataLeft ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s">
                    <p>我想一直陪着你<strong>每一天</strong>并且伴随每个月的报表出现</p>
                    <p>这是我所希望的</p>
                    <p>最大的梦想！</p>
                </div>
                <div class="YearDataRight ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s">
                    <img src="img/11.png" alt="Alternate Text" />
                </div>
            </div>
            <div class="swiper-slide">
                <div class="YearDataRight ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s">
                    <img src="img/12.png" alt="Alternate Text" />
                </div>
                <div class="YearDataLeft ani" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1s">
                    <p>想听你说说话</p>
                    <p>断断续续也好</p>
                    <p>絮絮叨叨也好</p>
                    <p>说你今天的倒霉事</p>
                    <p>或者碰到楼下的小花猫</p>
                    <p>听你或轻柔或高昂的声调</p>
                </div>

            </div>
            <div class="swiper-slide">
                <div class="YearDataLeft ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s">
                    <p>2021的第一个月，</p>
                    <p>也是我们在一起的第一个月</p>
                    <p>以后的每一个月</p>
                    <p>我都想</p>
                    <p>和你在一起!</p>
                    <p>爱你！</p>
                </div>

                <div class="YearDataRight ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s">
                    <img src="img/13.png" alt="Alternate Text" />
                </div>

            </div>
        </div>

        <div class="swiper-pagination"></div>
        <div class="jingyin zanting">
            <img class="yl1" src="img/yinliang1.png" alt="Alternate Text" />
            <img class="yl2" src="img/yinliang2.png" alt="Alternate Text" />
            <audio id="music" src="1.mp3"></audio>
        </div>

    </div>



    <script src="js/jquery.js"></script>
    <script src="swiper-bundle.min.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>

    <script>
        var swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            slidesPerView: 1,
            spaceBetween: 30,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on: {
                init: function () {
                    swiperAnimateCache(this); //隐藏动画元素 
                    swiperAnimate(this); //初始化完成开始动画
                },
                slideChangeTransitionEnd: function () {
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                }
            }
        });
        var audio = document.getElementById('music');
        audio.play();
        if (audio.paused) {
            $('.yl2').show();
            $('.yl1').hide();
            $(".jingyin").addClass('zanting');

        } else {
            $('.yl1').show();
            $('.yl2').hide();
            $(".jingyin").removeClass('zanting')
        }
        $(".jingyin").click(function () {
            $('.yl1').toggle();
            $('.yl2').toggle();
            if ($(this).hasClass('zanting')) {
                $(this).removeClass('zanting');
                audio.play();
            } else {
                $(this).addClass('zanting');
                audio.pause();
            }

        })


    </script>

</body>


</html>